<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>权限管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f63f66a9">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=66b457d6">
</head>
<body>
<div id="app">
    <div style="width:300px;float:left;">
        <ul class="ztree" id="ulRight"></ul>
    </div>
    <div style="width:300px;padding: 5px;float:left;position: relative;">
        <table class="table-detail">
            <tr>
                <td class="td-title" style="width:33%;">名称</td>
                <td><input type="text" v-model="right.name"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">类别</td>
                <td><input type="text" v-model="right.rightType"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">图标</td>
                <td><input type="text" v-model="right.imageUrl"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">APP图标</td>
                <td><input type="text" v-model="right.appImageUrl"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">url</td>
                <td><input type="text" v-model="right.url"/></td>
            </tr><tr>
                <td class="td-title" style="width:33%;">APP是否显示</td>
                <td><input type="text" v-model="right.appFlag"/></td>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">描述</td>
                <td><input type="text" v-model="right.description"/></td>
            </tr>
            <tr>
            <td class="td-title" style="width:33%;">是否默认</td>
            <td>
                <input type="radio" value="1" name="defaultFlag" v-model="right.defaultFlag"/>是
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" value="0" name="defaultFlag" v-model="right.defaultFlag"/>否
            </td>
        </tr>
            <tr>
                <td class="td-title" style="width:33%;">是否开放</td>
                <td>
                    <input type="radio" value="1" name="bloom" v-model="right.bloom"/>是
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" value="0" name="bloom" v-model="right.bloom"/>否
                </td>
            </tr>
        </table>
        <table class="table-detail">
            <tr>
                <th colspan="3" style="height: 30px;text-align: center;border-right: 1px solid #e8e8e9;font-weight: normal;">页面权限</th>
            </tr>
            <tr>
                <td class="td-title" style="width:33%;">描述</td>
                <td class="td-title" style="width:33%;">英文名<br>(要求唯一)</td>
                <td class="td-title" style="width:33%;">
                    <input type="button" value="添加" class="btn btn-primary btn-xs" @click="addRightOp"/>
                </td>
            </tr>
            <tr v-for="(item,i) in rightOps">
                <td><input type="text" style="text-align: center;" v-model="item.name"/></td>
                <td><input type="text"  style="text-align: center;" v-model="item.eName"/></td>
                <td><input type="button" value="删除" class="btn btn-primary btn-xs" @click="delRightOp(i)"/></td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="button" value="保存" class="btn btn-primary" @click="save" style="margin: 5px 0;"/>
                </td>
            </tr>
        </table>
    </div>

</div>

<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=ce17d0d6"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=aef57151"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script type="text/javascript" src="/dist/plugins/easyui/plugins/jquery.menu.js"></script>
<script type="text/javascript" src="/dist/plugins/easyui/plugins/jquery.parser.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="text/javascript">
    var zTreeRight = null;
    var zTreeRight_callback = {
        showIcon: function (treeId, treeNode) {
            return treeNode.isParent;
        },
        showRemoveBtn: function (treeId, treeNode) {
            return treeNode.type != "root";
        },
        showRenameBtn: function (treeId, treeNode) {
            return false;
        },
        addHoverDom: function (treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='添加' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                $.wyui.postMethod(urlConfig.system.right.save, {
                    id: '',
                    url:'/page/',
                    name: '新建菜单',
                    description:'',
                    parentId:treeNode.id,
                    sortNo:treeNode.children ? treeNode.children.length:0,
                    rightType:0,
                    defaultFlag:0,
                    bloom:0
                }, function (data) {
                    var newNode = zTreeRight.addNodes(treeNode, {
                        id: data.id,
                        url:'/page/',
                        name: '新建菜单',
                        description:'',
                        parentId:treeNode.id,
                        sortNo:treeNode.children ? treeNode.children.length:0,
                        rightType:0,
                        defaultFlag:0,
                        pId:treeNode.id,
                        type:"right",
                        dataId:data.id
                    },true)[0];
                    app.right = newNode;
                });
                return false;
            });
        },
        removeHoverDom: function (treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        },
        onClick: function (event, treeId, treeNode) {
            console.log(treeNode.type)
            if (treeNode.type != "root") {
                app.right = treeNode;
                console.log(treeNode)
                $.wyui.postMethod(urlConfig.system.rightOp.getByRightId,{rightId:treeNode.id},function (rightOps) {
                    app.rightOps = rightOps;
                });
            }
        },
        beforeDrag: function (treeId, treeNodes) {
            return true;
        },
        beforeDrop:function(treeId, treeNodes, targetNode, moveType, isCopy){
            var thisType=treeNodes[0].getParentNode().id;
            var toType=targetNode.getParentNode().id;
            console.log(thisType)
            console.log(toType)
            if(thisType==toType&&moveType!='inner'){
                return true;
            }else{
                return false;
            }

        },
        onDrop:function(event, treeId, treeNodes, targetNode, moveType, isCopy){
            var node = treeNodes[0].getParentNode();
            var newNodes = new Array();
            for(var i=0;i<node.children.length;i++){
                var data = node.children[i];
                newNodes.push(data.id);
            }
            var obj={
                rightIds:newNodes.join(",")
            };
            console.log(obj);
            $.wyui.postMethod(urlConfig.system.right.sort, obj, function (data) {
                console.log(data);
            });
        },
        beforeEditName: function (treeId, treeNode) { zTreeRegion.editName(treeNode);
            return false;
        },
        beforeRemove: function (treeId, treeNode) {
            if (confirm("确认删除吗？")) {
                $.wyui.postMethod(urlConfig.system.right.removeById, {id:treeNode.id}, function (data) {
                    zTreeRight.removeNode(treeNode);
                });
            }
            return false;
        },
        beforeRename: function (treeId, treeNode, newName, isCancel) {
            return false;
        },
        onRemove: function (e, treeId, treeNode) {
        },
        onRename: function (treeId, treeNode, newName, isCancel) {
        }
    };
    var zTreeRight_setting = {
        view: {
            addHoverDom: zTreeRight_callback.addHoverDom,
            removeHoverDom: zTreeRight_callback.removeHoverDom,
            showIcon: zTreeRight_callback.showIcon
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: zTreeRight_callback.onClick,
            beforeDrag: zTreeRight_callback.beforeDrag,
            beforeDrop: zTreeRight_callback.beforeDrop,
            onDrop: zTreeRight_callback.onDrop,
            beforeEditName: zTreeRight_callback.beforeEditName,
            beforeRemove: zTreeRight_callback.beforeRemove,
            beforeRename: zTreeRight_callback.beforeRename,
            onRemove: zTreeRight_callback.onRemove,
            onRename: zTreeRight_callback.onRename
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            removeTitle: '删除',
            renameTitle: '修改',
            showRemoveBtn: zTreeRight_callback.showRemoveBtn,
            showRenameBtn: zTreeRight_callback.showRenameBtn
        }
    };
    $(function () {
        $.wyui.postMethod(urlConfig.system.right.getTreeNodes, {}, function (nodes) {
            zTreeRight = $.fn.zTree.init($("#ulRight"), zTreeRight_setting, nodes);
            var opNodes = zTreeRight.getNodesByParam("type","rightOp");
            for (var i = 0; i < opNodes.length; i++) {
                zTreeRight.removeNode(opNodes[i]);
            }

        });
    });

    var app = new Vue({
        el:"#app",
        data:{
            right:{},
            rightOps:[]
        },
        methods:{
            addRightOp:function () {
                var node = zTreeRight.getSelectedNodes()[0];
                if(!node) {
                    alert("请选择菜单");
                    return;
                }
                this.rightOps.push({id:'',rightId:node.id,name:'',eName:''});
            },
            delRightOp:function (i) {
                if(!confirm("确认删除吗？")) {
                    return;
                }
                var that = this;
                $.wyui.postMethod(urlConfig.system.rightOp.removeById,{id:that.rightOps[i].id},function () {
                    that.rightOps.splice(i,1);
                });
            },
            save:function () {
                var that = this;
                var node = zTreeRight.getSelectedNodes()[0];
                if(!node) {
                    alert("请选择菜单");
                    return;
                }
                $.wyui.postMethod(urlConfig.system.right.save,this.right,function (id) {
                    zTreeRight.updateNode(node);
                    for (var i = 0; i < that.rightOps.length; i++) {
                        $.wyui.postMethod(urlConfig.system.rightOp.save,that.rightOps[i],function (data) {
                            that.rightOps[i].id = data.id;
                        },true);
                    }
                    alert("保存成功");
                });
            }
        }
    });
</script>
</body>
</html>
